<template>
  <div class="bar-setting">
      <el-form ref="barSetting" :model="setting" label-position="top"  style="height:auto;">
        <!-- <el-form-item label="Bar Chart Title">
            <el-input v-model="setting.title" placeholder="Please Enter Bar Title" style="width:80%;"></el-input>
        </el-form-item> -->
         <el-form-item :label="$t('custom.component.gadget.mode')">
          <el-select v-model="setting.valueFieldsNameMeasureL" :placeholder="$t('custom.component.gadget.dimensionPlaceholder')" style="width:80%;">
            <el-option v-for="(item,index) in modeOPtion" :key="index"  :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.name')" v-if="setting.valueFieldsNameMeasureL === '2'">
          <el-select v-model="setting.valueFieldsNameMeasureX" :placeholder="$t('custom.component.gadget.dimensionPlaceholder')" style="width:80%;">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.value')" v-if="setting.valueFieldsNameMeasureL === '2'">
          <el-select v-model="setting.valueFieldsNameMeasureY" :placeholder="$t('custom.component.gadget.dimensionPlaceholder')" style="width:80%;">
            <el-option v-for="(item,index) in fieldsList" :key="index"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div v-if="setting.valueFieldsNameMeasureL === '1'" class="funnel_box">
        <div style="padding-top:10px">{{$t('custom.component.gadget.dragSort')}}</div>
        <draggable v-model="funnelListStorage"  @end="datadragEnd">
            <div v-for="(its) in funnelListStorage"
                :key="its.label"
                class="funnel_item">
                <el-tooltip :open-delay="1000" class="item" v-if="its.label.length>38" effect="dark" :content="its.label" placement="top">
                  <div class="funnel_item_label">{{its.label}}:</div>
                </el-tooltip>
                <div v-else>{{its.label}} :</div>
                <div>{{its.value}}</div>
            </div>
        </draggable>
      </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'BarSetting',
  components: { draggable },
  data () {
    return {
      funnelListStorage: null,
      dataSource: [],
      typeList: ['funnel'],
      setting: {
        title: 'bar chart',
        type: 'StackingColumn', // Column -- many bar // StackingColumn -- Stacking bar //Bar StackingColumn  // Bar --Bar
        valueFieldsNameMeasureX: '',
        valueFieldsNameMeasureY: '',
        valueFieldsNameMeasureL: '1',
        valueFieldsNameMeasureGroup: 'group',
        valueFieldsNameManyY: [],
        manyMeasure: false,
        funnelListStorage: null,
        name: '',
        yName: '',
        drillThroughStatus: true,
        primaryXAxis: {
          valueType: 'Category',
          interval: 1,
          labelIntersectAction: 'Rotate45',
          labelPosition: 'Outside',
          majorGridLines: { width: 0 },
          minorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          minorTickLines: { width: 0 }
        },
        primaryYAxis: {
          majorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          minorGridLines: { width: 1 },
          minorTickLines: { width: 0 },
          lineStyle: { width: 0 },
          labelStyle: { color: 'transparent' }
        },
        chartArea: {
          border: {
            width: 0
          }
        },
        zoomSettings: {
          mode: 'X',
          enableMouseWheelZooming: false,
          enablePinchZooming: false,
          enableSelectionZooming: false,
          enableScrollbar: false
        },
        width: '100%',
        marker: {
          dataLabel: {
            visible: true,
            position: 'Top',
            font: {
              fontWeight: '600',
              color: '#ffffff'
            }
          }
        },
        tooltip: {
          enable: true
        },
        headerTitle: '',
        headerDescription: ''
      },
      modeOPtion: [
        {
          value: '1',
          label: 'Binding data to column'
        },
        {
          value: '2',
          label: 'Binding data to row'
        }
      ]

    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
 
  },
  computed: { },
  destroyed () {
    this.$root.eventBus.$off('funnelDataList')
  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
    this.$root.eventBus.$on('funnelDataList', (val) => {
      if (Array.isArray(val)) {
        this.funnelListStorage = val
      } else {
        this.funnelListStorage = []
        for (const key in val) {
          if (Object.hasOwnProperty.call(val, key)) {
            const element = val[key]
            this.funnelListStorage.push({
              label: key,
              value: element
            })
          }
        }
      }
    })
  },
  methods: {
    datadragEnd () {
      // let curArr = []
      // let num = 0
      // this._.cloneDeep(this.funnelListStorage).forEach(element => {
      //   curArr.push({
      //     label: element.label,
      //     value: element.value,
      //     index: num
      //   })
      //   num++
      // })
      // this.setting.funnelListStorage = curArr
    },
    findIndex (i) {
      return new Date().getTime() + i
    },
    changeManyMeasure (val) {
      if (val) {
        this.setting.valueFieldsNameMeasureY = ''
        this.setting.valueFieldsNameManyY = []
      } else {
        this.setting.valueFieldsNameManyY = []
      }
      this.$forceUpdate()
    },
    getData () {
      this.setting.funnelListStorage = this.funnelListStorage
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      // let temp = []
      /// this.dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)
      if (!this.setting.manyMeasure) {
        if (this.setting.valueFieldsNameManyY && this.setting.valueFieldsNameManyY.length > 0) {
          this.setting.manyMeasure = true
        } else {
          this.setting.manyMeasure = false
        }
      }
      this.$emit('update:data', this.setting)
    }

  }
}
</script>

<style lang="scss">
.bar-setting {
  .funnel_box{
    .funnel_item{
      border-top: 1px solid #ebebeb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      height: 48px;
      .funnel_item_label{
        width: 250px;
        text-overflow:ellipsis;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .funnel_item:hover{
      background-color: #f5f7fa;
    }
    .funnel_item:last-child{
      border-bottom: 1px solid #ebebeb;
    }
  }

}

</style>
